<template>
  <div class="login">
    <div class="login-con">
      <Card :bordered="false" :title="username">
        <Form
          ref="loginForm"
          :model="form"
          :rules="formValidate"
          @keydown.enter.native="handleUnlockScreen('loginForm')"
        >
          <FormItem prop="password">
            <Input
              type="password"
              password
              v-model="form.password"
              placeholder="请输入解锁密码"
            />
          </FormItem>
        </Form>
        <div style="text-align: right; margin-top: 10px">
          <Button
            @click="handleUnlockScreen('loginForm')"
            type="text"
            style="color: #2d8cf0"
          >
            解锁
            <Icon type="md-unlock" />
          </Button>
          <Button @click="handleLogout" type="text" style="margin-left: 10px">
            退出
            <Icon type="md-log-out" />
          </Button>
        </div>
      </Card>
    </div>
  </div>
</template>

<script>
import { mapActions, mapState } from "vuex";

export default {
  data() {
    return {
      form: {
        password: "",
      },
    };
  },
  computed: {
    ...mapState({
      username: (state) => state.user.username,
      isLocked: (state) => state.permission.isLocked,
      lockScreenPwd: (state) => state.permission.lockScreenPwd,
    }),
    formValidate() {
      return {
        password: [
          { required: true, message: "请输入解锁密码", trigger: "blur" },
        ],
      };
    },
  },
  methods: {
    ...mapActions(["handleLogOut"]),
    handleUnlockScreen(name) {
      this.$refs[name].validate((valid) => {
        if (valid) {
          var md5 = require("js-md5");
          let lockScreenPwdMd5 = md5("QAPlatform" + this.form.password);
          if (lockScreenPwdMd5 !== this.lockScreenPwd) {
            this.form.password = "";
            this.$Message.error("解锁密码错误,请重新输入");
            return;
          }
          this.$store.commit("unlockScreen", false);
          this.$router.push({ name: "home" });
        }
      });
    },
    handleLogout() {
      this.$Modal.confirm({
        title: "退出系统",
        content: "退出系统, 是否继续?",
        onOk: () => {
          this.handleLogOut().then(() => {
            this.$router.push({
              name: "login",
            });
          });
        },
      });
    },
  },
};
</script>

<style lang="less">
.login {
  width: 100%;
  height: 100%;
  background-image: url("../../assets/images/login-bg.jpg");
  background-size: cover;
  background-position: center;
  position: relative;
  &-con {
    position: absolute;
    right: 160px;
    top: 50%;
    transform: translateY(-60%);
    width: 300px;
  }
}
</style>